<template>
  <div>
    <div class="screen-search layout-container out-border">
      <div class="screen-header d-flex justify-content-between">
        <div class="screen-l">
          <i class="el-icon-search"></i>
          <span class="txt">筛选搜索</span>
        </div>
        <div class="screen-r">
          <el-button size="mini">重置</el-button>
          <el-button type="primary" @click.prevent="handlesearchOrders" size="mini">查询结果</el-button>
        </div>
      </div>
      <div class="submit-container">
        <el-form ref="formSearchData" :model="formSearchData" class="form-conten t d-flex flex-wrap">
          <!-- <el-from-item class="form-item mb-3 d-flex" v-if="item.type == 'select'">
            <label class="form-item-title">{{ item.label_name }}</label>
            <el-select v-model="value" placeholder="全部">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-from-item>
          <el-from-item class="form-item mb-3 d-flex" v-else-if="item.type == 'Date'">
            <label class="form-item-title">{{ item.label_name }}</label>
            <div class="block">
              <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>
            </div>
          </el-from-item> -->
          <el-form-item class="form-item mb-3 d-flex" :prop="item.prop" v-for="item in this.form_item" :key="item.prop">
            <div v-if="item.type == 'Input'" class="d-flex">
              <label class="form-item-title">{{ item.label_name }}</label>
              <el-input v-model="formSearchData[item.prop]" :placeholder="item.placeholder"></el-input>
            </div>
            <template>
              <el-form-item class="form-item mb-3 d-flex" v-if="item.type == 'Date'">
                <label class="form-item-title">{{ item.label_name }}</label>
                <div class="block">
                  <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker>
                </div>
              </el-form-item>
            </template>
            <template>
              <el-form-item class="form-item mb-3 d-flex" v-if="item.type == 'Select'">
                <label class="form-item-title">{{ item.label_name }}</label>
                <el-select v-model="value" placeholder="全部">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'inputBox',
  props: {
    formSearchData: {
      type: Object,
      default: () => {},
    },
    form_item: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  methods: {},
}
</script>
<style lang="scss">
.form-item-title {
  min-width: 110px;
  text-align: right;
  font-size: 14px;
  color: #606266;
  margin-right: 15px;
  line-height: 2.5;
}
.input-size {
  width: 203px;
  font-size: 13px;
}
.el-form-item__content {
  display: flex !important;
}
</style>
